// =============================================================================
// SCSS/SITE/INC/MIXINS/_CSS3.SCSS
// -----------------------------------------------------------------------------
// Various CSS3 mixins along with some supplemental mixins for particular
// styles such as opacity.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Box Shadow
//   02. Box Sizing
//   03. Animations
//   04. Transitions
//   05. Transformations
//       a. Rotate
//       b. Scale
//       c. Translate
//       d. Translate 3D
//       e. Skew
//   06. Backface Visibility
//   07. User Select
//   08. Resize Anything
//   09. Content Columns
//   10. Optional Hypenation
//   11. Opacity
// =============================================================================

// Box Shadow
// =============================================================================

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow;
          box-shadow: $shadow;
}



// Box Sizing
// =============================================================================

@mixin box-sizing($boxModel) {
  -webkit-box-sizing: $boxModel;
     -moz-box-sizing: $boxModel;
          box-sizing: $boxModel;
}



// Animations
// =============================================================================

@mixin animate($animation) {
  -webkit-animation: $animation;
     -moz-animation: $animation;
       -o-animation: $animation;
          animation: $animation;
}



// Transitions
// =============================================================================

@mixin transition($transition) {
  -webkit-transition: $transition;
          transition: $transition;
}



// Transformations
// =============================================================================

//
// Rotate.
//

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
     -moz-transform: rotate($degrees);
      -ms-transform: rotate($degrees);
       -o-transform: rotate($degrees);
          transform: rotate($degrees);
}


//
// Rotate Y.
//

@mixin rotate-y($degrees) {
  -webkit-transform: rotateY($degrees);
     -moz-transform: rotateY($degrees);
      -ms-transform: rotateY($degrees);
          transform: rotateY($degrees);
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
}


//
// Scale.
//

@mixin scale($ratio) {
  -webkit-transform: scale($ratio);
     -moz-transform: scale($ratio);
      -ms-transform: scale($ratio);
       -o-transform: scale($ratio);
          transform: scale($ratio);
}


//
// Translate.
//

@mixin translate($x, $y) {
  -webkit-transform: translate($x, $y);
      -ms-transform: translate($x, $y);
          transform: translate($x, $y);
}


//
// Translate 3D.
//

@mixin translate3d($x, $y, $z) {
  -webkit-transform: translate3d($x, $y, $z);
      -ms-transform: translate3d($x, $y, $z);
          transform: translate3d($x, $y, $z);
}


//
// Skew.
//

@mixin skew($x, $y) {
  -webkit-transform: skew($x, $y);
     -moz-transform: skew($x, $y);
       -o-transform: skew($x, $y);
          transform: skew($x, $y);
}



// Backface Visibility
// =============================================================================

//
// Prevents browsers from flickering when using CSS 3D transforms.
// Default value is 'visible' but can be changed to 'hidden'.
//

@mixin backface-visibility($visibility){
  -webkit-backface-visibility: $visibility;
     -moz-backface-visibility: $visibility;
          backface-visibility: $visibility;
}



// User Select
// =============================================================================

@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
       -o-user-select: $select;
          user-select: $select;
}



// Resize Anything
// =============================================================================

//
// 1. Options: 'horizontal', 'vertical', or 'both'.
// 2. Safari fix.
//

@mixin resizable($direction) {
  resize: $direction; // 1
  overflow: auto; // 2
}



// Content Columns
// =============================================================================

@mixin content-columns($columnCount: 2, $columnGap: 3em, $columnRule: 1px solid #e5e5e5) {
  -webkit-column-count: $columnCount;
     -moz-column-count: $columnCount;
          column-count: $columnCount;
  -webkit-column-gap: $columnGap;
     -moz-column-gap: $columnGap;
          column-gap: $columnGap;
  -webkit-column-rule: $columnRule;
     -moz-column-rule: $columnRule;
          column-rule: $columnRule;
}



// Optional hypenation
// =============================================================================

@mixin hyphens($mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: $mode;
     -moz-hyphens: $mode;
       -o-hyphens: $mode;
          hyphens: $mode;
}



// Opacity
// =============================================================================

@mixin opacity($opacity: 0.5) {
  opacity: $opacity;
}